import { Popup, TextArea, Button, SafeArea, Form, Toast } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocalObservable } from 'mobx-react'
import IconFont from '@/components/IconFont'
import Store from '../../store'
import styles from './index.module.less'

type PropsType = {
    visible: boolean
    /** reject-拒绝；accept-接受 */
    operate: string
    onClose: () => void
    onConfirm: (v?: Record<string, any>) => void
}

const SelectPopup = (props: PropsType) => {
    const store = useLocalObservable(() => new Store())
    const { quickAcceptList, quickRejectList } = store

    const { visible, operate, onClose, onConfirm } = props || {}
    const [quickAccept, setQuickAccept] = useState<string[]>([])
    const [quickReject, setQuickReject] = useState<string[]>([])

    const [form] = Form.useForm()
    /** 生成我的岗位匹配表 */
    const onGenerate = () => {
        form.validateFields()
            .then(values => {
                onConfirm(values)
            })
            .catch(error => {
                Toast.show(error.errorFields[0].errors[0])
            })
    }

    /** 理由快捷赋值 */
    const onQuick = (content: string) => {
        const quick = operate === 'reject' ? quickReject : quickAccept
        const hasQuick = quick.findIndex(item => item === content)

        const reason = operate === 'reject' ? form.getFieldsValue().reject_reason : form.getFieldsValue().accept_reason

        if (hasQuick < 0) {
            operate === 'reject' ? setQuickReject([...quick, content]) : setQuickAccept([...quick, content])

            operate === 'reject'
                ? form.setFieldsValue({
                      reject_reason: reason ? `${reason}${content};` : `${content};`,
                  })
                : form.setFieldsValue({
                      accept_reason: reason ? `${reason}${content};` : `${content};`,
                  })
        } else {
            operate === 'reject' ? setQuickReject(quick.filter(item => item !== content)) : setQuickAccept(quick.filter(item => item !== content))

            operate === 'reject'
                ? form.setFieldsValue({
                      reject_reason: reason.replace(`${content};`, ''),
                  })
                : form.setFieldsValue({
                      accept_reason: reason.replace(`${content};`, ''),
                  })
        }
    }

    /** 输入框是否有快捷标签 */
    const verifyHasQuick = (content: string) => {
        const result = operate === 'reject' ? quickReject.find(item => item === content) : quickAccept.find(item => item === content)

        return result
    }

    /** 理由值改变 */
    const changeTextArea = (val: string) => {
        operate === 'reject'
            ? quickReject.map((item, index) => {
                  if (!val.includes(item + ';')) {
                      setQuickReject(quickReject.filter((items, indexs) => index !== indexs))
                  }
              })
            : quickAccept.map((item, index) => {
                  if (!val.includes(item + ';')) {
                      setQuickAccept(quickAccept.filter((items, indexs) => index !== indexs))
                  }
              })
    }

    return (
        <Popup
            visible={visible}
            bodyStyle={{
                borderTopLeftRadius: '12px',
                borderTopRightRadius: '12px',
            }}
            onMaskClick={() => onClose()}
        >
            <div className={styles.popup}>
                <div className={styles.popup_head}>
                    <div className={styles.popup_close} onClick={() => onClose()}>
                        <IconFont type="icon-icon_guanbi" />
                    </div>
                    <div className={styles.popup_title}>{operate === 'reject' ? '拒绝此岗位' : '接受此岗位'}</div>
                </div>
                <Form form={form}>
                    <div className={styles.popup_wrap}>
                        <div className={styles.form_item}>
                            <div className={styles.form_item_label}>
                                <div className={styles.required}>*</div>
                                <div className={styles.label}>{operate === 'reject' ? '拒绝理由' : '接受理由'}</div>
                            </div>
                            <div className={styles.form_item_input}>
                                <Form.Item
                                    noStyle
                                    name={`${operate === 'reject' ? 'reject_reason' : 'accept_reason'}`}
                                    rules={[
                                        {
                                            required: true,
                                            message: operate === 'reject' ? '请输入拒绝理由' : '请输入接受理由',
                                        },
                                    ]}
                                >
                                    <TextArea
                                        placeholder="请输入"
                                        rows={3}
                                        onChange={val => {
                                            changeTextArea(val)
                                        }}
                                        className={styles.textarea}
                                    />
                                </Form.Item>
                            </div>
                            {operate === 'reject' ? (
                                <div className={styles.quick}>
                                    {quickRejectList.map((item, index) => (
                                        <div className={[styles.quick_item, verifyHasQuick(item) && styles.active].join(' ')} key={index} onClick={() => onQuick(item)}>
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className={styles.quick}>
                                    {quickAcceptList.map((item, index) => (
                                        <div className={[styles.quick_item, verifyHasQuick(item) && styles.active].join(' ')} key={index} onClick={() => onQuick(item)}>
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                        <div className={styles.form_item}>
                            <div className={styles.form_item_label}>
                                <div className={styles.required}>*</div>
                                <div className={styles.label}>下一步行动</div>
                            </div>
                            <div className={styles.form_item_input}>
                                <Form.Item
                                    noStyle
                                    name={`${operate === 'reject' ? 'reject_next_steps' : 'accept_next_steps'}`}
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入下一步行动',
                                        },
                                    ]}
                                >
                                    <TextArea placeholder="请输入" rows={3} className={styles.textarea} />
                                </Form.Item>
                            </div>
                        </div>
                    </div>
                    <div className={styles.popup_footbtn} onClick={onGenerate}>
                        <Button className={styles.btn}>生成我的岗位匹配表</Button>
                    </div>
                </Form>
                <SafeArea position="bottom" />
            </div>
        </Popup>
    )
}

export default SelectPopup
